<template>
  <div class="filter-container">
    <van-popup
      class="pop-box"
      v-model="myVisible"
      position="right"
      @close="close"
      :closeable="true"
    >
      <div class="form-box">
        <van-form @submit="onSubmit">
          <van-cell-group>
            <van-field
              label-width="60px"
              name="name"
              v-model="form.name"
              label="姓名："
            />
            <van-field
              label-width="60px"
              name="area"
              v-model="form.area"
              label="区域："
            />
            <van-field
              label-width="60px"
              name="source"
              v-model="form.source"
              label="来源："
            />
            <van-field
              class="radio-box"
              name="addWxWork"
              label="是否添加微信："
            >
              <template #input>
                <van-radio-group
                  v-model="form.addWxWork"
                  direction="horizontal"
                >
                  <van-radio :name="1">是</van-radio>
                  <van-radio :name="0">否</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </van-cell-group>
          <div class="btn">
            <van-button type="primary" native-type="submit"> 确定 </van-button>
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      default: false,
      type: Boolean,
    },
  },
  data() {
    return {
      myVisible: this.visible,
      form: {
        name: "",
        source: "",
        addWxWork: 1,
        area: "",
      },
    };
  },
  methods: {
    close() {
      this.$emit("close", false);
    },
    onSubmit(values) {
      this.$emit("onOk", values);
    },
  },
  watch: {
    visible(newV, oldV) {
      this.myVisible = newV;
    },
  },

};
</script>
<style lang="scss" scoped>
.pop-box {
  height: 100vh;
  width: 70vw;
  .form-box {
    margin-top: 60px;
    /deep/.van-field__control {
      border: 1px solid #ddd;
      border-radius: 6px;
    }
    .radio-box {
      /deep/.van-field__control {
        border: 0;
        border-radius: 0;
      }
    }
    .btn {
      width: 30%;
      margin: 30px 20px;
      button {
        width: 100%;
        border-radius: 4px;
        font-size: 16px;
      }
    }
  }
}
</style>
